<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 全组组件面包屑 -->
        <my-bread-crumb>内容管理</my-bread-crumb>
      </div>

      <el-form ref="form" :model="form" label-width="80px" class="text item">
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio label='999'>全部</el-radio>
            <el-radio label="0">草稿</el-radio>
            <el-radio label="1">待审核</el-radio>
            <el-radio label="2">审核通过</el-radio>
            <el-radio label="3">审核失败</el-radio>
            <el-radio label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>

          <!-- 全局组件-文章频道 -->
          <my-articles-channel v-model="form.channel_id"></my-articles-channel>

        <el-form-item label="日期">
          <div class="block">
            <el-date-picker v-model="form.theDate" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="searchArticles" :loading="isLoading">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>根据筛选条件共查询到{{pageData.totalCount}}条结果:</span>
      </div>
      <el-table height="380" :data="tableData" border style="width: 100%" v-loading="isLoading">
        <el-table-column label="封面" width="200">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px" :src="scope.row.cover.images[0]"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="300">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="200">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status===0" type="info">草稿</el-tag>
            <el-tag v-else-if="scope.row.status===1" type="success">待审核</el-tag>
            <el-tag v-else-if="scope.row.status===2">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
            <el-tag v-else type="danger">unknow</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间" width="200">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click='editRow(scope)'></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click='deleteRow(scope)'></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :hide-on-single-page="true" :total="pageData.totalCount"
        :page-size="pageData.pageSize" @current-change="thePage" :disabled='isLoading'>
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'articles',
  data: function () {
    return {
      isLoading: false,
      form: { // 查询条件的数据
        status: '999',
        channel_id: null,
        theDate: null
      },
      tableData: [],
      pageData: { // 分页的数据
        pageSize: 10, // 每页显示多少条
        totalCount: 0, // 后台数据总共多少条文章 初始值0
        page: 1 // 当前页数 初始值1
      }
    }
  },
  mounted () {
    this.articlesFn()
    // 进入页面先加载一次
    //  {
    //   status: null, // 文章状态,  null - 全部,  0 - 草稿， 1 - 待审核， 2 - 审核通过， 3 - 审核失败， 4 - 已删除，
    //   channel_id: null, // 频道 id， null为全部
    //   begin_pubdate: null, // 2019 - 01 - 01 起始时间， 不传就不限定开始时间
    //   end_pubdate: null, // 2019 - 01 - 02 截止时间， 不传就不限定结束时间
    //   page: null, // 页数， 默认是 1
    //   per_page: null, // 每页数量， 默认每页 10 条
    //   response_type: null// 返回数据的字段，不传返回用于内容管理的字段，传 comment 返回用于评论管理的字段，传 statistic 返回用于图文数据的字段
    // }
  },
  methods: {
    theParams: function () { // 加工查询条件数据
      const theP = {}
      // 第几页
      theP.page = this.pageData.page
      // 状态
      if (this.form.status === '999') {
        theP.status = null
      } else {
        theP.status = this.form.status * 1
      }
      // 频道
      theP.channel_id = this.form.channel_id
      // 日期
      if (this.form.theDate) {
        theP.begin_pubdate = this.form.theDate[0]
        theP.end_pubdate = this.form.theDate[1]
      } else {
        theP.begin_pubdate = null
        theP.end_pubdate = null
      }
      return theP
    },
    articlesFn: function () { // 查询发送请求
      const theP = this.theParams()
      this.$axios.get('/mp/v1_0/articles', { params: theP }).then(res => {
        this.tableData = res.data.data.results // 填充 表格组件
        this.pageData.totalCount = res.data.data.total_count // 分页组件 数据
        this.isLoading = false // 取消禁用
      }).catch(err => {
        console.log(err)
      })
    },
    searchArticles: function () {
      // 点击查询按钮
      this.isLoading = true
      this.articlesFn()
    },
    editRow: function (scope) {
      // 编辑
      console.log()
      this.$router.push('/edit/' + scope.row.id.toString())
    },
    doDel: async function (a) {
      console.log(a)
      try {
        const res = await this.$axios({
          method: 'DELETE',
          url: '/mp/v1_0/articles/' + a
        })
        await console.log(res)
        this.articlesFn()
        // TODO 更新页面
        await this.$message({
          message: '删除成功!!!',
          type: 'success'
        })
      } catch (err) {
        this.$message.error('删除失败!!!')
        console.log(err)
      }
    },
    deleteRow: function (scope) {
      // 删除
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDel(scope.row.id.toString())
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    thePage: function (a) {
      // 切换组件页码
      this.pageData.page = a
      // 更换页码后加载一次
      this.articlesFn()
    }
  }
}
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    margin-bottom: 20px;
  }
</style>
